
;;(function($){
    function oneValues(){
        var result;
        //获取url中"?"符后的字串  
        var url=window.location.search; 
        if(url.indexOf("?")!=-1){
            result = url.substr(url.indexOf("=")+1);
        }
        return result;
    }
    $.ajax({
        type: "GET",
        url: "./json/kuaizulist.json",
        dataType: "json",
        success: function(data){
            // console.log(data.list)
                    var html = '';
                    $.each(data.list, function(i,item){
                        // console.log(item.id)
                        if(item.id == oneValues()){
                            html = `<div class="magnifierContainer">
                            <div class="imgLeft">
                                <div class="imgMedium" id="imgMedium">
                                    <div class="magnifier" id="magnifier">
                                    </div>
                                    <ul class="mediumContainer" id="mediumContainer">
                                            <li class="small1"><img src="${item.image_url}"></li>
                                            <li class="small2"><img src="./images/goods/85a17269e4a67339b72e.jpg"></li>
                                            <li class="small3"><img src="./images/goods/8297987b7ba2969e60ed.jpg"></li>
                                            <li class="small4"><img src="./images/goods/e94ed0fdb9b0094134c8.jpg"></li>
                                    </ul> 
                                    <div id="zhezhao"></div>            
                                </div>
                                <ul class="img_x" id="img_x">
                                    <li><img src="${item.image_url}"></li>
                                    <li><img src="./images/goods/85a17269e4a67339b72e.jpg"></li>
                                    <li><img src="./images/goods/8297987b7ba2969e60ed.jpg"></li>
                                    <li><img src="./images/goods/e94ed0fdb9b0094134c8.jpg"></li>
                                </ul>
                            </div>
                            <div class="imgRight">
                                <ul class="img_u" id="img_u">
                                    <li><img src="${item.image_url}"></li>
                                    <li><img src="./images/goods/85a17269e4a67339b72e.jpg"></li>
                                    <li><img src="./images/goods/8297987b7ba2969e60ed.jpg"></li>
                                    <li><img src="./images/goods/e94ed0fdb9b0094134c8.jpg"></li>
                                </ul>
                            </div>        
                        </div>
                        <div class="details-Selects">
                                <h4>${item.title}</h4>
                                <p>${item.goods_name}<span></span></p>
                                <div class="details-price">月租金：
                                    <span>¥</span>
                                    <span class="price-number">${item.group_price}</span>
                                    <span class="label label-info">月付</span>
                                </div>
                            <ul class="box-select box-selects">
                                <span class="box-left-span">选择：</span>
                                <li><a href="javascript:void(0)">i5/8G内存/128G SSD/HD6000/13.3英寸</a></li>
                                <li><a href="javascript:void(0)">i7/16G内存/512G SSD/HR9M370X/15.4英寸</a></li>
                                <li><a href="javascript:void(0)">i5/8G内存/256G SSD/HD6000/13.3英寸</a></li>
                                <li><a href="javascript:void(0)">i7/16G内存/256G SSD/HD5200/15.4英寸</a></li>
                            </ul>
                            <ul class="box-select box-select-date">
                                <span class="box-left-span">租赁方式：</span>
                                <form action="">
                                    <li>
                                        租金：<span class="color-tex">¥<span class="color-tex">438.00</span></span></br>
                                        租期：<span class="color-tex">12</span>月</br>
                                        <span title="租完即送：租期结束后设备归客户所有"> 
                                        <span class="glyphicon glyphicon-calendar text-warning"></span>&nbsp;固定租期
                                        <a href="javascript:void(0)" class="glyphicon glyphicon-question-sign"></a>
                                        </span>
                                    </li>
                                    <li>
                                        租金：<span class="color-tex">¥<span class="color-tex">416.00</span></span></br>
                                        租期：<span class="color-tex">12</span>月</br>
                                        <span title="租完即送：租期结束后设备归客户所有"> 
                                        <span class="glyphicon glyphicon-blackboard text-danger"></span>&nbsp;固定租期
                                        <a href="javascript:void(0)" class="glyphicon glyphicon-question-sign"></a>
                                        </span>
                                    </li>
                                    <li>
                                        租金：<span class="color-tex">¥<span class="color-tex">394.00</span></span></br>
                                        租期：<span class="color-tex">12</span>月</br>
                                        <span title="租完即送：租期结束后设备归客户所有"> 
                                        <span class="glyphicon glyphicon-blackboard text-danger"></span>&nbsp;固定租期
                                        <a href="javascript:void(0)" class="glyphicon glyphicon-question-sign"></a>
                                        </span>
                                    </li>	
                                    <li>
                                        租金：<span class="color-tex">¥<span class="color-tex">468.00</span></span></br>
                                        租期：<span class="color-tex">12</span>月</br>
                                        <span title="租完即送：租期结束后设备归客户所有"> 
                                        <span class="glyphicon glyphicon-blackboard text-danger"></span>&nbsp;随借随还
                                        <a href="javascript:void(0)" class="glyphicon glyphicon-question-sign"></a>
                                        </span>
                                    </li>	
                                </form>
                            </ul>
                            <div class="select-date">
                                <span class="box-left-span">使用日期：</span>
                                <button value="2017-9-22">2019-5-20</button>
                            </div>
                            <div class="select-date select-number">
                                <span class="box-left-span">租机数量：</span>
                                <a class="cut" href="javascript:void(0)" style="border-right:none">-</a>
                                <input type="text" value="1" id="Input"/>
                                <a class="add" href="javascript:void(0)" style="border-left:none">+</a>
                            </div>
                            <div class="deposit">
                                <p>每台押金：<span><b>¥</b> 6700</span></p>
                            </div>
                            <div class="month-dep">
                                月租金：<b> ¥ </b><span class="money">${item.group_price}</span>
                            </div>
                            <div class="shopping-cart">
                                <a class="cart-add"><span class="glyphicon glyphicon-shopping-cart"></span>&nbsp;加入购物车</a>
                                <a class="shopping-add" href="./carts.html">立即租赁</a>
                                <a href="#" class="tex-instroduce">&nbsp;什么是免租金租赁？</a>
                            </div>
                    </div>`;
                        }
                          
                   });
                   $(".container-contents").html(html)
                   ;;(function($){
                    $(".container-list ul .xie").css({'padding': '0 5px',color:"#ccc"});
                    $(".container-list ul li:last").css({"color":"#777"})
                    $(".clicks li").click(function(){
                        $(this).css({"background":"#8FC31F"});
                        $(".clicks li").not($(this)).css({"background":"#F7F7F7"});
                        var index = $(this).index();
                        $(".show").eq(index).show();
                        $(".show").not($(".show").eq(index)).hide();
                    })
                    $(window).scroll(function(){
                        var tops = $(document).scrollTop();
                        if(tops>=1000){
                            $(".clicks").css({position:"sticky",top:"0"})
                        }else{
                            $(".clicks").css({position:"relative"})
                        }
                    })
                    $(".box-selects li").eq(1).css({
                        border:"1px solid #8FC31F",
                        background:"url('./images/goods/selecteds.jpg') no-repeat right bottom"
                    })
                    $(".box-selects li").click(function(){
                        $(this).css({
                            border:"1px solid #8FC31F",
                            background:"url('./images/goods/selecteds.jpg') no-repeat right bottom"
                        })
                        $(".box-selects li").not($(this)).css({
                            border:"1px solid #ddd",
                            background:"none"
                        })
                    })
                    $(".box-select-date li").eq(2).css({
                        border:"1px solid #8FC31F",
                        background:"url('./images/goods/selecteds.jpg') no-repeat right bottom"
                    })
                    $(".box-select-date li").click(function(){
                        $(this).css({
                            border:"1px solid #8FC31F",
                            background:"url('./images/goods/selecteds.jpg') no-repeat right bottom"
                        })
                        $(".box-select-date li").not($(this)).css({
                            border:"1px solid #ddd",
                            background:"none"
                        })
                    })
                    $(".mediumContainer li").eq(0).css({zIndex:1});
                    $(".img_u li").eq(0).css({zIndex:1});
                    $("#img_x li").eq(0).css("border","2px solid #ddd")
                    $(".imgMedium").mousemove(function(e){
                        $("#magnifier").show();
                        $(".img_u").show();
                        var left = e.offsetX - $("#magnifier").width()/2;
                        var top = e.offsetY - $("#magnifier").height()/2;
                        left = left < 0 ? 0 : left;
                        left = left > ($('#zhezhao').outerWidth() - $('#magnifier').outerWidth())? ($('#zhezhao').outerWidth() - $('#magnifier').outerWidth()) : left;
                        top = top < 0 ? 0 : top;
                        top = top > ($('#zhezhao').outerHeight() -$('#magnifier').outerHeight()) ? ($('#zhezhao').outerHeight() - $('#magnifier').outerHeight()) : top;
                        $('#magnifier').css({'left': left + 'px'});
                        $('#magnifier').css({'top': top + 'px'});
                        var leftRate = left / $('#zhezhao').outerWidth();
                        var bigLeft = leftRate * $('#img_u img').outerWidth();
                        $('#img_u img').css('margin-left', -bigLeft + 'px');
                        var topRate = top /$('#zhezhao').outerHeight();
                        var bigTop =  topRate * $('#img_u img').outerHeight();
                        $('#img_u img').css('margin-top', -bigTop + 'px');
                    })
                    $(".imgMedium").mouseleave(function(){
                        $("#magnifier").hide()
                        $(".img_u").hide()
                    })
                    $("#img_x li").click(function(){
                        $(this).css({border:"2px solid #ddd"}).siblings().css({border:"2px solid transparent"})
                        var index=$(this).index();
                        $(".mediumContainer li").eq(index).css({zIndex:"2"}).siblings().css({zIndex:"1"})
                        $(".img_u li").eq(index).css({zIndex:"2"}).siblings().css({zIndex:"1"})
                    })
                    //购物车功能
                    $('.select-number').on('click','a',changeCount);
                    $('.cart-add').on('click',addCart);
                    function changeCount(){
                        let data = parseInt($('#Input').val());
                        if($(this).hasClass('add')){
                            data = data + 1;
                        }else{
                            if(data === 1){
                                return false;
                            }
                            data = data - 1;
                        }
                        $('#Input').val(data)
                    }
                    function addCart(){
                        //获取数据
                        let dataValue = oneValues();
                        let data = parseInt($('#Input').val());
                        dataValue = typeof dataValue === 'string' ? dataValue : JSON.stringify(dataValue);
                        data = typeof data === 'string' ? data : JSON.stringify(data);
                        localStorage.setItem(`${dataValue}`,`${data}`);
                    }
                })(jQuery);
       }
   });
})(jQuery);
